<template>
  <MainLayout>
    <section class="figma-header">
      <div class="container">
        <div class="figma-content">
          <div class="figma-icon">
            <img class="icon" src="/images/seek/figma/icon.png" alt="" />
            <img class="jiantou" src="/images/seek/figma/youjiantou.png" alt="" />
          </div>
          <div class="figma-title">在AnyRender中使用Figma框架作为纹理</div>
          <div class="find-btn">
            <div class="find-btn-txt">观看教程</div>
          </div>
        </div>
      </div>
    </section>

    <div class="collapse-section">
      <div class="container">
        <div class="collapse-content">
          <div class="collapse-inner">
            <el-collapse accordion>
              <el-collapse-item title="同步">
                <div>同步的内容</div>
              </el-collapse-item>
              <el-collapse-item title="导入贴纸">
                <div>导入贴纸的内容</div>
              </el-collapse-item>
              <el-collapse-item title="创建纹理">
                <div>创建纹理的内容</div>
              </el-collapse-item>
              <el-collapse-item title="将2D转换为3D">
                <div>将2D转换为3D的内容</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="collapse-img">
            <img src="/images/seek/figma/shili.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <section class="figma-header">
      <div class="container">
        <div class="figma-content">
          <div class="figma-desc">
            <div class="figma-tips">使用AnyRender插件创建3D模型</div>
            <div class="figma-text">
              快速模型的模型库-只需添加您的品牌。对于任何用户界面、产品或工业设计师以及营销团队来说都是很好的工具。
            </div>
          </div>
          <div class="figma-logo">
            <img src="/images/logo.svg" alt="" />
          </div>
          <div class="figma-icon">
            <img class="jiantou" src="/images/seek/figma/youjiantou.png" alt="" />
            <img class="icon" src="/images/seek/figma/icon.png" alt="" />
          </div>
        </div>
      </div>
    </section>

    <div class="card-section">
      <div class="container">
        <div class="card-content">
          <div class="card-item">
            <div class="card-item-icon">
              <img src="/images/seek/figma/luxiangji.png" alt="" />
            </div>
            <div class="card-item-title">选择最佳角度</div>
            <div class="card-item-desc">导入3D模型，以获得360种可能的方式来查看设计。在预生产或概念简报中使用它。</div>
          </div>
          <div class="card-item">
            <div class="card-item-icon">
              <img src="/images/seek/figma/ar.png" alt="" />
            </div>
            <div class="card-item-title">增强现实中的预览</div>
            <div class="card-item-desc">显示模型，只需要你的手机，即可在真实环境中查看真实产品。</div>
          </div>
          <div class="card-item">
            <div class="card-item-icon">
              <img src="/images/seek/figma/zhengfangxing.png" alt="" />
            </div>
            <div class="card-item-title">将3D带入Figma</div>
            <div class="card-item-desc">粘贴您在AnyRender中创建的3D模型的链接。更换材料，显示配置。无限的可能性。</div>
          </div>
        </div>
      </div>
    </div>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/seek/figma/banner.jpg" alt="" />
      </div>
    </section>
  </MainLayout>
</template>

<script setup></script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .figma-header {
    padding: 48px 0;
    .container {
      .figma-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .figma-icon {
          display: flex;
          align-items: center;
          margin-right: 30px;
          img {
            margin-right: 10px;
            &.icon {
              width: 50px;
            }
            &.jiantou {
              width: 25px;
            }
          }
        }
        .figma-title {
          flex: 1;
          font-size: 36px;
        }
        .figma-desc {
          flex: 1;
          .figma-tips {
            font-size: 28px;
            color: #000;
            font-weight: 500;
            margin-bottom: 15px;
          }
          .figma-text {
            font-size: 16px;
            color: #585858;
          }
        }
        .figma-logo {
          height: 40px;
          margin: 0 20px;
          img {
            height: 100%;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .figma-content {
          .figma-icon {
            display: flex;
            align-items: center;
            margin-right: 15px;
            img {
              margin-right: 6px;
              &.icon {
                width: 40px;
              }
              &.jiantou {
                width: 20px;
              }
            }
          }
          .figma-title {
            flex: 1;
            font-size: 26px;
          }
          .figma-desc {
            flex: 1;
            .figma-tips {
              font-size: 26px;
            }
          }
          .figma-logo {
            height: 30px;
            margin: 0 15px;
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .figma-content {
          flex-direction: column;
          .figma-icon {
            display: none;
          }
          .figma-title {
            flex: 1;
            font-size: 26px;
            text-align: center;
          }
          .figma-desc {
            flex: 1;
            text-align: center;
            .figma-tips {
              font-size: 24px;
            }
            .figma-text {
              font-size: 14px;
            }
          }
          .figma-logo {
            margin-top: 20px;
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .figma-content {
          .figma-title {
            flex: 1;
            font-size: 22px;
            text-align: center;
          }
          .figma-desc {
            flex: 1;
            text-align: center;
            .figma-tips {
              font-size: 22px;
            }
          }
          .figma-logo {
            margin-top: 15px;
          }
        }
      }
    }
  }
  .find-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 6px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
    }
    @media (max-width: $breakpoint-desktop) {
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 16px;
        min-width: 80px;
        font-size: 14px;
      }
    }

    @media (max-width: $breakpoint-mobile) {
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 14px;
        min-width: 80px;
        font-size: 14px;
      }
    }
  }
  .collapse-section {
    padding: 20px 0 40px;
    .container {
      .collapse-content {
        display: flex;
        justify-content: space-between;
        .collapse-inner {
          flex: 1 1 50%;
          padding: 20px;
          :deep(.el-collapse) {
            border: none;
            background-color: transparent;
            .el-collapse-item__header {
              background-color: transparent;
              font-weight: 600;
              font-size: 20px;
              height: 60px;
              line-height: 60px;
            }
            .el-collapse-item__wrap {
              background-color: transparent;
              .el-collapse-item__content {
                font-size: 16px;
              }
            }
          }
        }
        .collapse-img {
          flex: 1 1 50%;
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .collapse-content {
          flex-direction: column;
          .collapse-inner {
            flex: 1 1 100%;
            :deep(.el-collapse) {
              .el-collapse-item__header {
                font-size: 20px;
                height: 50px;
                line-height: 50px;
              }
            }
          }
          .collapse-img {
            flex: 1 1 100%;
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      .container {
        .collapse-content {
          .collapse-inner {
            :deep(.el-collapse) {
              .el-collapse-item__header {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }

  .card-section {
    padding: 20px 0 40px;
    .container {
      .card-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
        .card-item {
          flex: 1 1 calc(33% - 20px);
          padding: 20px;
          border-radius: 16px;
          border: 1px solid #eaeaea;
          .card-item-icon {
            width: 30px;
            height: 30px;
            margin-bottom: 20px;
          }
          .card-item-title {
            font-size: 18px;
            font-weight: 550;
            margin-bottom: 15px;
          }
          .card-item-desc {
            font-size: 14px;
            color: #666;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .card-content {
          gap: 15px;
          .card-item {
            flex: 1 1 calc(33% - 10px);
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .card-content {
          gap: 15px;
          .card-item {
            flex: 1 1 100%;
          }
        }
      }
    }
  }

  .img-section {
    padding: 20px 0 40px;
    .container {
      .img-section-img {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
      }
    }
  }
</style>
